<template>
	<div class="system-operlog-container">
		<el-dialog title="操作日志详情" v-model="isShowDialog" >
			<el-form ref="detailOperlogFormRef" :model="formData">
				<el-row>
					<div class="system-operlog-label">操作模块：</div>
					<div class="system-operlog-info">{{ formData.title }}</div>
				</el-row>
				<el-divider class="system-operlog-divider"></el-divider>
				<el-row>
					<div class="system-operlog-label">登录信息：</div>
					<div class="system-operlog-info">{{ formData.operName }} / {{ formData.operIp }} / {{ formData.operLocation }}</div>
				</el-row>
				<el-divider class="system-operlog-divider"></el-divider>
				<el-row>
					<div class="system-operlog-label">请求路径：</div>
					<div class="system-operlog-info">{{ formData.operUrl }}</div>
				</el-row>
				<el-divider class="system-operlog-divider"></el-divider>
				<el-row>
					<div class="system-operlog-label">操作名称：</div>
					<div class="system-operlog-info">{{ formData.businessName }}  {{ formData.businessLabel }}  {{ formData.businessRemark }}</div>
				</el-row>
				<el-divider class="system-operlog-divider"></el-divider>
				<el-row>
					<div class="system-operlog-label">操作端点：</div>
					<div class="system-operlog-info">{{ formData.clientName }}  {{ formData.clientLabel }}  {{ formData.clientRemark }}</div>
				</el-row>
				<el-divider class="system-operlog-divider"></el-divider>
				<el-row>
					<div class="system-operlog-label">操作方法：</div>
					<div class="system-operlog-info color-primary">{{ formData.method }}</div>
				</el-row>
				<el-divider class="system-operlog-divider"></el-divider>
				<el-row>
					<div class="system-operlog-label">操作状态：</div>
					<div class="system-operlog-info">
						<span v-if="formData.status == '0'" class="color-success">成功</span>
						<span v-else class="color-danger">失败</span>
					</div>
				</el-row>
				<el-divider class="system-operlog-divider"></el-divider>
				<el-row>
					<div class="system-operlog-label">请求标识：</div>
					<div class="system-operlog-info color-primary">{{ formData.operTraceId }}</div>
				</el-row>
				<el-divider content-position="left">请求头部：</el-divider>
				<el-row>
					<JsonViewer v-if="operHeaderIsJson" :value="formData.operHeader" :expand-depth="4"></JsonViewer>
					<div v-else class="system-operlog-info">{{ formData.operHeader }}</div>
				</el-row>
				<el-divider content-position="left">请求参数：</el-divider>
				<el-row>
					<JsonViewer v-if="operParamIsJson" :value="formData.operParam" :expand-depth="4"></JsonViewer>
					<div v-else class="system-operlog-info">{{ formData.operParam }}</div>
				</el-row>
				<el-divider content-position="left">请求结果：</el-divider>
				<el-row>
					<JsonViewer v-if="operResultIsJson" :value="formData.operResult" :expand-depth="4"></JsonViewer>
					<div v-else class="system-operlog-info">{{ formData.operResult }}</div>
				</el-row>
				<el-divider class="system-operlog-divider"></el-divider>
				<el-row v-if="formData.errorMsg != null && formData.errorMsg != ''">
					<div class="system-operlog-label">异常信息：</div>
					<div class="system-operlog-info color-danger">{{ formData.errorMsg }}</div>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel">关 闭</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs, ref } from 'vue';
import JsonViewer from 'vue-json-viewer';

export default {
	name: 'operlog/detail',
	components: { JsonViewer },
	setup() {
		const detailOperlogFormRef = ref();
		const state = reactive({
			isShowDialog: false,
			formData: {},
			operHeaderIsJson: false,
			operParamIsJson: false,
			operResultIsJson: false,
		});

		// 打开弹窗
		const openDialog = (row?: object) => {
			state.isShowDialog = true;
			if(row){
				state.formData = Object.assign({}, row);
				try {
					if(state.formData.operHeader){
						const header = JSON.parse(state.formData.operHeader);
						state.formData.operHeader = header.length == 1 ? header[0] : header;
						state.operHeaderIsJson = true;
					}
				} catch(e) {
					state.operHeaderIsJson = false;
				}
				try {
					if(state.formData.operParam){
						const params = JSON.parse(state.formData.operParam);
						state.formData.operParam = params.length == 1 ? params[0] : params;
						state.operParamIsJson = true;
					}
				} catch(e) {
					state.operParamIsJson = false;
				}
				try {
					if(state.formData.operResult){
						const result = JSON.parse(state.formData.operResult);
						state.formData.operResult = result;
						state.operResultIsJson = true;
					}
				} catch(e) {
					state.operResultIsJson = false;
				}
			}
		};
		// 关闭弹窗
		const closeDialog = (row?: object) => {
			state.isShowDialog = false;
			state.operParamIsJson = false;
			state.operResultIsJson = false;
			for(var key in state.formData) {
				state.formData[key] = undefined;
			}
			detailOperlogFormRef.value.resetFields();
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		return {
			detailOperlogFormRef,
			openDialog,
			closeDialog,
			onCancel,
			...toRefs(state),
		};
	},
};
</script>
<style scoped lang="scss">
.system-operlog-container{
	width: 100%;
	.system-operlog-divider{
		margin: 10px 0;
	}
	.system-operlog-label {
		width: 110px;
		line-height: 32px;
		font-weight: 500;
		text-align: right;
		color: var(--el-text-color-primary);
	}
	.system-operlog-info{
		width: auto;
		line-height: 32px;
		padding: 0 10px;
	}
	:deep .jv-container .jv-code {
		padding: 0 20px;
	}
}
</style>